<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>
<%@ page import="com.ckeditor.CKEditorConfig" %>
<%@ page import="java.util.Date" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<%@ taglib uri="http://cksource.com/ckfinder" prefix="ckfinder" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>编辑</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <link href="//cdn.bootcss.com/jqueryui/1.11.3/jquery-ui.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/jqueryui/1.11.3/jquery-ui.theme.min.css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckeditor_4.5.1_full/ckeditor.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ckfinder/ckfinder.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="//cdn.bootcss.com/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/cyUtil.js"></script>
    <script type="text/javascript">
        var data = <s:action name="article_loadClassify" namespace="/article" executeResult="true"/>;
        var classifys = data.classifys;
        $(function(){
            for(var key in classifys){
                if( key == '<s:property value="classifyid"/>'){
                    $("#classify").append("<option value='"+key+"' selected >"+classifys[key]+"</option>");
                }else{
                    $("#classify").append("<option value='"+key+"'>"+classifys[key]+"</option>");
                }
            }
            $("#classifyDialog").dialog(
                    {
                        autoOpen: false,
                        modal: true,
                        height: 196,
                        width: 250,
                        zIndex: 10,
                        buttons: {
                            '确认':function(){
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/article/article_insertClassify.action',
                                    type:'post',
                                    dataType:'json',
                                    data:{classifyname:$("#classifyname").val()},
                                    success:function(data){
                                        if(data.success) {
                                            $("#classify").append("<option value='"+data.obj.id+"' selected = 'selected'>"+data.obj.name+"</option>");
                                            $("#classifyDialog").dialog("close");
                                        }else{
                                            $("#message").html(data.msg);
                                        }
                                    }
                                });

                            }
                        },
                        Cancel:function(){
                            $(this).dialog("close");
                        }
                    });

            $("select[name=state]").children().each(function(){
                if($(this).val() ==  $("select[name=state]").attr("value")){
                    $(this).prop("selected",true);
                }
            })

        });
        function addClassify(){
            $("#classifyname").val("");
            $("#classifyDialog").dialog("open");
        }

        function getCurTime(){
            var date_time = DateFormat(new Date(),"yyyy-MM-dd hh:mm:ss");
            $("#datetimepicker").val(date_time);
        }
    </script>
</head>
<body>
<div class="container" style="width:80%;margin:0 auto;">
    <div>
        <form action="${pageContext.request.contextPath}/article/article_addOrUpdate.action" method="post" enctype="multipart/form-data">
            <input type="hidden" value="${id}" name="id">
            <input type="hidden" value="${title == null ? '发表文章' : title}" name="tabTitle">
            <div style="margin-top: 20px;">
                标题:<input name="title" style="width: 400px;" value="<s:property value='title'/>"><s:fielderror fieldName="title"/>
                发布状态:<select name="state" value="<s:property value='state == null ? 0 : state'/>">
                             <option value="1">发布</option>
                             <option value="0">不发布</option>
                             <option value="2">置顶</option>
                         </select>
            </div>
            <div style="margin-top: 20px;">
                <span style="display: inline-block">发布时间:</span>
                <s:if test="releasetime == null">
                     <input type="text" id="datetimepicker" name="releasetime" value="<fmt:formatDate value='<%=new Date() %>' pattern='yyyy-MM-dd HH:mm:ss' />" class="form-control" style="width:300px;display: inline-block">
                </s:if>
                <s:else>
                    <input type="text" id="datetimepicker" name="releasetime" value="<fmt:formatDate value='${releasetime}' pattern='yyyy-MM-dd HH:mm:ss' />" class="form-control" style="width:300px;display: inline-block">
                </s:else>
                <button type="button" onclick="getCurTime();">获取当前时间</button>
            </div>
            <div style="padding-top:20px;">
                <textarea id="content" name="content">${content}</textarea>
            </div>
            <s:fielderror fieldName="container"/>
            <div style="margin-top:20px;">
                文章概要:<textarea style="width:500px;height:100px;" name="overview">${overview}</textarea>
            </div>
            <div style="margin-top:20px;">
                <lable>文件上传:</lable><input type="file" name="file">
                <s:if test="filename != null && filename !='' ">
                     <img src="${pageContext.request.contextPath}/upload/${filename}" style="width: 102px; height: 77px;">
                </s:if>
            </div>
            <div style="margin-top:20px;">
                <div style="display:inline-block;width:170px;">
                    <lable>文章分类:</lable>
                    <select name="classifyid" id="classify">
                    </select>
                </div>
                <div style="display:inline-block;width:20px;">
                    <span class="plus ui-icon ui-icon-plusthick" style="cursor: pointer" onclick="addClassify();"></span>
                </div>
            </div>
            <div style="width: 100%;text-align: left;margin-top: 20px;">
                <input type="submit" value="提交">
                <input type="button" value="返回" onclick="javascript:history.back(-1);">
            </div>
        </form>
    </div>
</div>
<div id="classifyDialog" title="新增分类">
    <div style="margin-top:30px;">
        <input type="text" id="classifyname" />
        <span id="message" style="color:red;"></span>
    </div>
</div>
<%
    CKEditorConfig settings = new CKEditorConfig();
    settings.addConfigValue("height", "400");
%>
<ckfinder:setupCKEditor editor="content" basePath="/js/ckfinder/"/>
<ckeditor:replace replace="content" basePath="/js/ckeditor_4.5.1_full/" config="<%=settings %>"/>
</body>
</html>
<script>
    //不晓得为什么 这段时间控件的初始化代码必须放到这里,否则无效.
    $("#datetimepicker").datetimepicker({
        format : 'yyyy-mm-dd hh:ii:ss',
        minView : 0,
        autoclose : true,
        startView : 4,
        language : "zh-CN"
    });

</script>
<%--<script type="text/javascript">
    var editor = null;
    window.onload = function(){
        editor = CKEDITOR.replace('content',
                {
                    on: {
                            instanceReady: function( ev ) {
                            this.dataProcessor.writer.setRules( 'p', {
                            indent: false,
                            breakBeforeOpen: false,   //<p>之前不加换行
                            breakAfterOpen: false,    //<p>之后不加换行
                            breakBeforeClose: false,  //</p>之前不加换行
                            breakAfterClose: false    //</p>之后不加换行7
                            });
                       }
                    }
                }); //参数‘content’是textarea元素的name属性值，而非id属性值
                CKFinder.setupCKEditor( editor, '${pageContext.request.contextPath}/js/ckfinder/' );
    }
</script>--%>